One of the most important aspects of navigation, and interface design generally, lies in an understanding of graphic symbolism. If you have had a good art college training, you will probably have been introduced to the theoretical concepts behind symbols and logotype design. Capturing the literal or abstract essence of a company identity and making a visual representation of it in the form of a symbol or trade mark is something a graphic designer has to do all the time.

Designing icons and navigational devices for computer programs requires exactly the same skills and, for those readers who have not had the advantage of such a background, I will give a brief introduction.

This is a symbol that practically every
animal on Earth recognises from birth

Primitive symbols are the
most universally recognised
across time and culture

We are born into this world with a basic, instinctive recognition of the visual representation of 'mother'. A human, animal, bird, fish or reptile that has sight at birth will recognise a face - in its simplest form, a circle containing two eyes. After that, everything else has to be learned by association.

Primitive man made drawings on cave walls. We call these Iconographs because they are literal representations of things, as we see them, translated into two dimensional drawings. The word 'icon' has, traditionally, a much deeper significance as it also describes a particular type of religious painting representing much more than its 'face value'.

To understand an icon, we must first of all recognise it. Recognition comes from matching the visual symbol with a memory, or experience, stored in our brain. If the symbol is poorly represented because of inept draughtsmanship or if its significance is beyond the viewer's experience, then recognition fails. It can also fail even if the representation is good and the viewer knows what it is, if it is presented out of its usual context.

The classic heart and arrow
motif is a cliché that we know not
to take too literally

This danger signal holds two grim
messages - blood and death.

The second type of symbol is the Ideograph. This is a graphic representation of an abstract idea - one that has no direct visual equivalent, because we can't see it.

Love is often symbolised by a heart - because you can't draw love. Danger is represented by a skull. A cross can have many meanings, depending on its context. A cross on a child's school book means something entirely different from a cross on a ballot slip. A cross on a road sign has no relationship with a cross on a church.

Chinese characters are based on ideographs because each has a meaning. If you have not been taught to read and write Chinese, the ideas behind the visual symbols are meaningless, as are the meanings of the symbols themselves.

In computer interface design, you will often be faced with having to depict something that is not a visual concept and it is not easy. An ideograph requires not only recognition but also the mental connection with the idea it represents. In the absence of an 'ideal' pictorial representation of a difficult concept, is better to 'cheat' and put a word under an icon than to leave the user confused.

We all know the significance of
the 50 stars and 13 stripes
because we were taught them.
Put together in this fashion,
the symbol is uniquely distinctive,
memorable, highly emotive
and recognisable even
when severely distorted.

Any successful symbol or icon
should have the same attributes

The third main type of symbol is the Mnemonic Symbol, one that has no obvious visual or ideological connection but triggers a recollection of some previously learned information.

Examples of mnemonic symbols are Roman alphanumeric characters, Egyptian numerals and just about any company logo that you can think of.

A hypertext link is a mnemonic symbol too, we know that because it has been explained to us at some stage. When we see a piece of text on a computer screen and it is underlined, and maybe in a different colour, we know that we can click on it and it takes us off to some relevant item.

Companies spend a lot of money promoting their logo or symbol. The connection has to be 'drummed' into the public through constant exposure and association. We have all, as children, had the alphabet taught to us in the same fashion.

The interesting thing about a mnemonic symbol is that, once established, it can work out of context. Some of the World's most successful icons, the Coca Cola swirl and Mickey Mouse's head are so universally known that they can be distorted, sawn in half and recoloured and they are still recognisable.

The desktop icon of my
PowerMac 8500 is a
fairly accurate representation
- it is EXPLICIT

This home page icon
is, more accurately, a house
but it represents
the same concept so it is
a good METAPHOR

The ultimate ideograph!

Not all symbols fall into one of these three categories directly but can borrow from all three. As interface designers, we rarely have the luxury of being able to instigate a mnemonic style of symbol, it takes too much exposure and learning, exposure and learning. If there are existing mnemonic devices, like the universally understood hypertext link, they can be used without repercussion. If you want to create your own, they should be extensively tested to see if they work - and modified until they do.

To distil this theory down to basic practicality, interface elements should be either EXPLICIT or METAPHORICAL to stand a chance. The real life electrical switch that says ON and OFF leaves little margin for error. A graphical representation of such a switch on a computer screen would be expected to have the same functionality - it is a metaphor of the real thing.

The genius of the Apple Macintosh's 'desktop' metaphor makes it so easy to use. Having made the mental connection with a real desktop and the one on the screen means that one not only understands what each item is but can anticipate its usage. Since 1984 the Mac user has been able to drag a document or application from one folder to another or to the trash can if it is no longer required. It is this consistent anticipation of functionality and the subsequent reward of accomplishment that set the Mac interface apart from all others and makes it a such a pleasure to use.

I don't know the origin of these
symbols, but even four year old children
seem to understand them!

Programs that play sound or video clips invariably use the metaphor of a tape or video player's transport controls. This works every time! Web pages are less sophisticated in their interface possibilities being somewhere in between 'multimedia' and traditional print. Nevertheless, by using navigational devices based on these same time-tested principles, your web page DESIGN will be more successful.